<template>
  <el-dialog
    v-model="visible"
    top="15%"
    width="536px"
    class="example-index-dialog"
    modal-class="example-index-dialog-mask"
    append-to-body
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <!-- header -->
    <template #header>
      <div class="dialog-header">
        <div class="cn-medium-16 text-1 mr-8">达人管理</div>
        <div class="cn-regular-14 text-2 mr-4">当前共添加</div>
        <div class="cn-regular-14 brand-5">{{ 0 }}</div>
        <div class="cn-regular-14 text-2 ml-4">位达人</div>
      </div>
    </template>
    <!-- body -->
    <div v-loading="loading" class="dialog-body">
      <!-- 左边列表 -->
      <div class="all-expert-list">
        <div class="all-expert-scroller">
          <div v-for="item in allExperts" :key="item.id" class="all-expert-item">
            <LazyImage class="item-avatar mr-12" :src="item.avatar" />
            <div class="item-text cn-regular-12 text-1 ellipsis">{{ item.nickName }}</div>
            <img class="item-btn ml-12" width="16" height="16" src="../images/delete-icon.svg" alt="删除" />
          </div>
        </div>
      </div>
      <!-- 右边面板 -->
      <div class="search-expert-area">
        <!-- 搜索栏 -->
        <div class="search-bar">
          <div class="search-bar-label cn-regular-14 text-1">添加达人</div>
          <el-input v-model="keyword" class="search-bar-input" placeholder="请输入达人昵称/抖音号" :suffix-icon="searchIcon" />
        </div>
        <!-- 搜索列表 -->
        <div class="search-list">
          <div v-if="!searchExperts || searchExperts?.length" class="search-scroller">
            <div v-for="item in searchExperts" :key="item.id" class="search-item">
              <LazyImage class="item-avatar mr-12" :src="item.avatar" />
              <div class="item-text cn-regular-12 text-1 ellipsis">{{ item.nickName }}</div>
              <img v-if="!item.isSubmit" class="item-btn ml-12" width="16" height="16" src="../images/add-icon.svg" alt="添加" />
              <div v-else class="item-status cn-regular-12 text-2-4 ml-12">已添加</div>
            </div>
          </div>
          <ExampleIndexEmpty v-else empty-text="暂无相关内容" />
        </div>
      </div>
    </div>
    <!-- footer -->
    <template #footer>
      <div class="dialog-footer">
        <div class="dialog-btn">
          <div class="btn-save cn-regular-14" @click="handleClose">保存</div>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import LazyImage from '@/components/lazy-image.vue';
import ExampleIndexEmpty from './example-index-empty.vue';
import searchIcon from '../images/search-icon.vue';

defineOptions({
  name: 'ExampleIndexDialog'
});

interface Props {
  modelValue: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false
});

const allExperts = ref<any[]>([]);
const searchExperts = ref<any>(null);
const keyword = ref<string>('');

const emits = defineEmits(['update:modelValue']);

const loading = ref(false); // 弹窗展示loading

// 弹窗可见性，手动实现双向绑定
const visible = computed<boolean>({
  set(v) {
    emits('update:modelValue', v);
  },
  get() {
    return props.modelValue;
  }
});

// 关闭弹窗
const handleClose = () => {
  visible.value = false;
};

</script>

<style lang="scss">
.example-index-dialog {
  background: linear-gradient(0deg, rgb(6 19 75 / 50%) 0%, rgb(8 20 95 / 70%) 100%);
  border: 2px solid;
  border-radius: 6px;
  border-image-source: linear-gradient(180deg, rgb(102 123 141 / 42%) 0%, rgb(125 145 161 / 0%) 34.05%, rgb(125 145 161 / 0%) 68.61%, rgb(102 123 141 / 50%) 100%);
  box-shadow: 0 5px 20px .5px rgb(43 46 52 / 56%) inset;

  /* stylelint-disable-next-line selector-class-pattern */
  .el-dialog__header {
    padding: 16px 24px;
    margin-right: 0;
    border-bottom: 1px solid var(--text-2-5);
  }

  /* stylelint-disable-next-line selector-class-pattern */
  .el-dialog__footer {
    padding: 16px 24px;
    border-top: 1px solid var(--text-2-5);
  }

  /* stylelint-disable-next-line selector-class-pattern */
  .el-dialog__body {
    padding: 0;
  }

  .dialog-header {
    display: flex;
    align-items: center;
  }

  .dialog-footer {
    .dialog-btn {
      display: flex;
      gap: 8px;
      justify-content: center;
    }

    .btn-cancel {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 32px;
      padding: 3px 15px;
      color: var(--text-1);
      cursor: pointer;
      background: #72748666;
      border-radius: 2px;
    }

    .btn-save {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 32px;
      padding: 3px 15px;
      color: var(--text-1);
      cursor: pointer;
      background: linear-gradient(287.61deg, #1f54a3 18.62%, #67c3c9 109.16%);
      border-radius: 2px;
    }
  }

  .dialog-body {
    display: flex;
    height: 280px;

    .all-expert-list {
      box-sizing: border-box;
      width: 266px;
      padding: 20px;
      overflow-y: auto;
      border-right: 1px solid var(--text-2-5);

      &::-webkit-scrollbar {
        width: 0;
      }

      .all-expert-scroller {
        .all-expert-item {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          height: 48px;
          padding: 8px;
          margin-bottom: $baseMarginBottom;
          background: rgb(255 255 255 / 10%);
          border-radius: 2px;

          &:last-child {
            margin: 0;
          }

          .item-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
          }

          .item-text {
            flex: 1;
          }

          .item-btn {
            cursor: pointer;
          }
        }
      }
    }

    .search-expert-area {
      width: 266px;

      .search-bar {
        box-sizing: border-box;
        display: flex;
        gap: 12px;
        width: 100%;
        padding: 16px;
        border-bottom: 1px solid var(--text-2-5);

        .search-bar-label {
          display: flex;
          align-items: center;
        }

        .search-bar-input {
          width: 166px;
          height: 26px;

          /* stylelint-disable-next-line selector-class-pattern */
          .el-input__wrapper {
            padding: 3px 8px;
            background: rgb(114 116 134 / 40%);
            border-radius: 4px;
            box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;

            /* stylelint-disable-next-line selector-class-pattern */
            .el-input__inner {
              height: 20px;
              font-size: 12px;
              font-style: normal;
              font-weight: 400;
              line-height: 20px;
              color: var(--text-1);

              &::placeholder {
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 20px;
                color: var(--text-2-3);
              }
            }

            .el-icon {
              width: 16px;
              height: 16px;
              cursor: pointer;

              svg {
                width: 16px;
                height: 16px;
              }
            }
          }
        }
      }

      .search-list {
        box-sizing: border-box;
        height: 221px;
        padding: 20px;
        overflow-y: auto;

        &::-webkit-scrollbar {
          width: 0;
        }

        .search-scroller {
          .search-item {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            height: 48px;
            padding: 8px;
            margin-bottom: $baseMarginBottom;
            background: rgb(255 255 255 / 10%);
            border-radius: 2px;

            &:last-child {
              margin: 0;
            }

            .item-avatar {
              width: 32px;
              height: 32px;
              border-radius: 50%;
            }

            .item-text {
              flex: 1;
            }

            .item-btn {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}

.example-index-dialog-mask {
  background-color: rgb(0 0 0 / 60%);
  backdrop-filter: blur(10px);
}
</style>
